<script setup>

import { ElMessage } from "element-plus";
import { ref, watch } from "vue";
import { emailValid, phoneValid } from "@/utils/validator";

const info = ref({
    account: '',
    password: ''
})
const userInfo = ref({})
getUserInfo()

function getUserInfo() {
    const obj = JSON.parse(localStorage.getItem('USER_INFO'))
    if (!obj) {
        const tmp = {
            account: '110@qq.com',
            password:'Hy123123'
        }
        localStorage.setItem("USER_INFO", JSON.stringify(tmp))
    }
    userInfo.value = JSON.parse(localStorage.getItem('USER_INFO'))
} 
const formRef = ref(null)
const canLogin = ref(false)
import router from "@/router";

const accountValid = (rule, value, callback) => {
    if (!value) {
        callback(new Error('账号不能为空'));
    }
    else if (!emailValid(value) && !phoneValid(value)) {
        callback(new Error('账号必须是有效的手机号或邮箱地址'));
    }
    else {
        callback();
    }
};

const rules = ref({
    account: [
        { required: true, message: '请输入邮箱号/手机号', trigger: 'blur' },
        { validator: accountValid, trigger: 'blur' }
    ],
    password: [
        { required: true, message: '请输入密码', trigger: 'blur' }
    ]
})
watch(info,
    () => {
        formRef.value.validate((valid) => {
            if (valid) {
                canLogin.value = true
            } else {
                canLogin.value = false
            }
        })
    },
    {
        deep: true
    }
)

const handleLogin = () => {
    
    
    formRef.value.validate(async (valid) => {
        if (!valid) {
            return ElMessage.error('请填写正确的信息')
        }
        const data = {
            password: info.value.password
        }
        if (emailValid(info.value.account)) {
            data.account = info.value.account;
        } else if (phoneValid(info.value.account)) {
            data.account = info.value.account
        }
        
        if (data.account === userInfo.value.account && data.password === userInfo.value.password) {
            ElMessage.success('登录成功')
            router.push('/main')
        } else {
            ElMessage.error('账号或密码错误')
        }
    })
}
</script>
    
<template>
    <div class="login-container">
        <div class="login-form">
            <div class="title">
                <span style="padding-right: 30px; border-right: 3px solid black;">HES</span><span
                    style="margin-left: 30px;">Management</span>
            </div>
            <div class="form">
                <el-form :model="info" :rules="rules" ref="formRef">
                    <el-form-item label="账号" prop="account">
                        <el-input size="large" v-model="info.account" placeholder="请输入邮箱号/手机号" />
                    </el-form-item>
                    <el-form-item label="密码" prop="password" style="margin-top: 10px;">
                        <el-input size="large" v-model="info.password" placeholder="请输入密码" type="password"
                            show-password />
                    </el-form-item>
                    <button class="login-btn" :class="{ can_login: canLogin }" @click.prevent="handleLogin">登录</button>
                </el-form>
            </div>
        </div>
    </div>
</template>



<style scope lang="less">
.login-container {
    overflow: hidden;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: url('@/assets/imgs/loginbac.jpg');
    background-color: aqua;

    .login-form {
        width: 30%;
        height: 50%;
        background-color: white;
        opacity: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        .title {
            display: flex;
            font-weight: 600;
            color: black;
            font-size: 18px;
            font-family: 'Arial Black', sans-serif;
            font-weight: bold;
        }

        .form {
            width: 100%;

            .el-form {
                margin: 40px;
            }

            .el-form-item {
                display: block;

                .el-form-item__label {
                    font-size: 16px;
                    color: black;
                    font-weight: 600;
                }
            }

            .el-form-item__error {
                font-size: 14px;
                margin-left: 12px;
            }

            .login-btn {
                margin-top: 10px;
                width: 100%;
                padding: 7px 0;
                background-color: #999999;
                border: none;
                color: white;
            }

            .can_login {
                background-color: #3797c2;
            }
        }
    }
}
</style>
